<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
    <link href="/css/css.css" rel="stylesheet" type="text/css"/>
    <link href="/css/common.css" rel="stylesheet" type="text/css"/>
    <link href="/Threelinkage/linkage.css" rel="stylesheet" type="text/css"/>
    <script src="/js/jquery.foucs.js" type="text/javascript"></script>
    <script src="/js/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script src="/js/jquery.SuperSlide.2.1.1.js" type="text/javascript"></script>
    <script src="/js/layer/layer.js"></script>
    <script src="/js/axios.min.js"></script>
    <script src="/js/vue.js"></script>
    <title>用户地址管理</title>

</head>


<body>
<!--用户中心(地址管理界面)-->
<div class="user_style clearfix" id="user">
    <div class="clearfix user">
        <div class="r_user_style">
            <div class="user_Borders">
                <div class="title_name">
                    <span class="name">地址管理</span>
                </div>
                <div class="about_user_info">
                    <div class="user_layout">

                        <table class="form_table" width="400px" height="300px" cellpadding="" cellspacing="">
                            <col width="120px"/>
                            <col/>
                            <row width="200px">
                            </row>
                            <caption>收货地址</caption>
                            <tr>
                                <th><span class="red">*</span> 收货人姓名：</th>
                                <td><input id='accept' name="accept" class="normal" type="text"
                                           v-model="accept"/><label>收货人真实姓名，方便快递公司联系。</label>
                                </td>
                            </tr>
                            <tr>
                                <th><span class="red">*</span> 所在地区：</th>
                                <td><select v-model="provinceId" @change="getCity(provinceId)">
                                    <option :value="p.id" v-for="p in provinces">
                                        {{p.name}}
                                    </option>
                                </select>
                                    <select v-model="cityId" @change="getArea(cityId)">
                                        <option :value="c.id" v-for="c in citys">
                                            {{c.name}}
                                        </option>
                                    </select> <select
                                            v-model="areaId">
                                        <option :value="a.id" v-for="a in areas">
                                            {{a.name}}
                                        </option>
                                    </select></td>
                            </tr>
                            <tr>
                                <th><span class="red">*</span> 街道地址：</th>
                                <td><input name='address' id='address' class="normal"
                                           type="text" v-model="address"/><label>真实详细收货地址，方便快递公司联系。</label></td>
                            </tr>
                            <tr>
                                <th>手机号码：</th>
                                <td><input name='tel' id='tel' class="normal"
                                           type="text" v-model="tel"/><label>手机号码，如：13588888888</label></td>
                            </tr>
                            <tr>
                                <th>设为默认：</th>
                                <td><label><input name="isdefault" id="isdefault" type='checkbox'
                                                  value='y' v-model="isdefault"></label></td>
                            </tr>
                            <tr>
                                <th></th>
                                <td><label class="btn"><input type="button" id="save"
                                                              value="保存" @click="save"/></label> <label
                                        class="btn"><input
                                        type="button"
                                        id="cancel" value="取消"/></label></td>
                            </tr>
                        </table>
                    </div>
                </div>
                <!--地址列表-->
                <div class="Address_List">
                    <div class="title_name"><span class="name">用户地址列表</span></div>
                    <div class="list">
                        <table id="addressdata">
                            <tr>
                                <th class="list_name_title0">序号</th>
                                <th class="list_name_title0">收件人姓名</th>
                                <th class="list_name_title1">所在地区</th>
                                <th class="list_name_title3">电话号码</th>
                                <th class="list_name_title4">收货地址</th>
                                <th class="list_name_title5">操作</th>
                            </tr>

                            <tr v-for="(address,index) in addresses">
                                <td>{{index+1}}</td>
                                <td>{{address.accept}}</td>
                                <td>{{address.province}}{{address.city}}{{address.area}}</td>
                                <td>{{address.tel}}</td>
                                <td>{{address.address}}</td>
                                <td>
                                    <div v-if="address.isdefault == 'y'">
                                        <a class="button border-main" href="javascript:void(0)"
                                           @click="initUpdate(address.id)"><span
                                                class="icon-edit"></span> 修改</a>
                                        默认地址
                                    </div>
                                    <div v-if="address.isdefault == 'n'">
                                        <a class="button border-main" href="javascript:void(0)"
                                           @click="initUpdate(address.id)"><span
                                                class="icon-edit"></span> 修改</a>
                                        <a class="button border-red" href="javascript:void(0)"
                                           @click="del(address.id,index)"><span class="icon-trash-o"></span> 删除</a>
                                        <a class="button border-red" href="javascript:void(0)"
                                           @click="setDefault(address.id,index)"><span class="icon-trash-o"></span> 设为默认</a>
                                    </div>

                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    new Vue({
        el: "#user",
        data: {
            addresses: [],
            accept: "",
            province: "",
            city: "",
            area: "",
            address: "",
            tel: "",
            addressId: "",
            isdefault: "",
            opr: "add",
            regions: [],
            provinces: [],
            citys: [],
            areas: [],
            provinceId: "",
            cityId: "",
            areaId: ""
        },
        methods: {
            getCity: function (id) {
                axios.post("getCitys", {
                    pid: id
                }).then(r => {
                    if (r.data.code === 200) {
                        this.citys = r.data.data;
                        this.areaId = "";
                    }
                });
            },
            getArea: function (id) {
                axios.post("getAreas", {
                    pid: id
                }).then(r => {
                    if (r.data.code === 200) {
                        this.areas = r.data.data;
                    }
                });
            },
            initUpdate: function (id) {
                this.opr = "update";
                axios.get("initUpdate?id=" + id).then(r => {
                    if (r.data.code === 200) {
                        this.accept = r.data.data.accept;
                        this.provinceId = r.data.data.provinceId;
                        this.cityId = r.data.data.cityId;
                        this.areaId = r.data.data.areaId;
                        axios.post("getCitys", {
                            pid: this.provinceId
                        }).then(r => {
                            if (r.data.code === 200) {
                                this.citys = r.data.data;
                            }
                        });
                        axios.post("getAreas", {
                            pid: this.cityId
                        }).then(r => {
                            if (r.data.code === 200) {
                                this.areas = r.data.data;
                            }
                        });
                        this.address = r.data.data.address;
                        this.tel = r.data.data.tel;
                        this.addressId = id;
                        if (r.data.data.isdefault == "y") {
                            this.isdefault = true;
                        } else if (r.data.data.isdefault == "n") {
                            this.isdefault = '';
                        }

                    }
                });
            },
            del: function (id, index) {
                layer.confirm("确认删除吗?", {icon: 7, title: '删除提示'}, () => {
                    axios.get("del?id=" + id).then(r => {
                        if (r.data.code === 200) {
                            layer.msg("删除成功", {
                                icon: 1,
                                time: 1000
                            }, () => {
                                this.clear();
                                axios.get("list").then(r => {
                                    if (r.data.code === 200) {
                                        this.addresses = r.data.data;
                                    }
                                });
                            });
                        }
                    });
                });

            },
            clear: function () {
                this.accept = "";
                this.provinceId = "请选择";
                this.areaId = "请选择";
                this.cityId = "请选择";
                this.address = "";
                this.tel = "";
                this.isdefault = "";
            }
            ,
            save: function () {
                if (this.isdefault == true) {
                    this.isdefault = "y";
                } else {
                    this.isdefault = "n";
                }
                if (this.opr == "add") {
                    axios.post("add", {
                        accept: this.accept,
                        provinceId: this.provinceId,
                        cityId: this.cityId,
                        areaId: this.areaId,
                        address: this.address,
                        tel: this.tel,
                        isdefault: this.isdefault

                    }).then(r => {
                        if (r.data.code === 200) {
                            layer.msg("增加成功", {
                                icon: 1,
                                time: 1000
                            }, () => {
                                this.clear();
                                axios.get("list").then(r => {
                                    if (r.data.code === 200) {
                                        this.addresses = r.data.data;
                                    }
                                });
                            })
                        } else if (r.data.code === 500) {
                            layer.msg('最多存储5个地址', {
                                icon: 7,
                                time: 1000 //2秒关闭（如果不配置，默认是3秒）
                            }, () => {
                                this.clear();
                            });
                        }
                    })
                } else if (this.opr == "update") {
                    let address = {
                        accept: this.accept,
                        provinceId: this.provinceId,
                        cityId: this.cityId,
                        areaId: this.areaId,
                        address: this.address,
                        tel: this.tel,
                        isdefault: this.isdefault,
                        id: this.addressId
                    }
                    axios.post("update", address).then(r => {
                        if (r.data.code === 200) {
                            layer.msg("修改成功", {
                                icon: 1,
                                time: 1000
                            }, () => {
                                this.clear();
                                this.opr = "add";
                                axios.get("list").then(r => {
                                    if (r.data.code === 200) {
                                        this.addresses = r.data.data;
                                        this.provinceId = "请选择";
                                        this.areaId = "请选择";
                                        this.cityId = "请选择";
                                    }
                                });
                                axios.post("getProvinces", {
                                    pid: null
                                }).then(r => {
                                    if (r.data.code === 200) {
                                        this.provinces = r.data.data;
                                    }
                                });
                            });
                        }
                    })
                }
            }
            ,
            setDefault: function (id, index) {
                axios.get("setdefault?id=" + id).then(r => {
                    if (r.data.code === 200) {
                        layer.msg("设置默认地址成功", {
                            icon: 1,
                            time: 1000
                        }, () => {
                            axios.get("list").then(r => {
                                if (r.data.code === 200) {
                                    this.addresses = r.data.data;
                                }
                            });
                        })
                    }
                })
            }
        },
        mounted: function () {
            axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
            axios.get("list").then(r => {
                if (r.data.code === 200) {
                    this.addresses = r.data.data;
                    this.provinceId = "请选择";
                    this.areaId = "请选择";
                    this.cityId = "请选择";
                }
            });
            axios.post("getProvinces", {
                pid: null
            }).then(r => {
                if (r.data.code === 200) {
                    this.provinces = r.data.data;
                }
            });
        }
    })
    ;
</script>
</body>
</html>